<template>
  <div class="header-box">
    <x-header :title="this.settings.title"
              :left-options="{showBack:this.settings.isShowBack,preventGoBack:this.settings.backEvent}">
      <a slot="right" @click="onRightClick">{{settings.rightTxt}}</a>
    </x-header>
  </div>
</template>
<style>

</style>
<script>
  import {XHeader} from 'vux';
  export default{
    components: {
      XHeader,
    },
    data(){
      return {
        msg: 'hello vue',
      }
    },
    props: {
      settings: {
        type: Object,
        required: true,
      }
    },
    methods: {
      onBackClick() {
        if (this.settings.backEvent) {
          this.settings.backEvent()
        }
      },
      onRightClick() {
        if (this.settings.rightEvent) {
          this.settings.rightEvent()
        }
      },
    }

  }
</script>
<style scoped>
  .header-box {
    z-index: 110;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
  }
</style>
